<template>
  <view class="main">
    <view class="top">
      <search leftWidth='300' bgColor='black'>
        <blockquote @click='goBack' slot="leftMain">
          <view class="left">
            <u-icon name="arrow-left" color="white" size="28"></u-icon> <text>评论列表</text>
          </view>
        </blockquote>
      </search>
    </view>
    <view class="abottom">
      <blockquote v-show="scList.length!=0">
        <view v-for="e in scList" class="aitem">
          <view class="aleft">
            <u-image width="84rpx" height="84rpx" :src="basesrc+e.userinfo[0].avator" :lazy-load="true"></u-image>
            <view class="aright">
              <view class="nickname">
                <text>{{e.userinfo[0].nickname}}</text><text>回复了我的评论</text>
              </view>
              <view class="content">
                <text>回复</text> <text>@{{e.userinfoa[0].nickname}}：</text> <text>{{e.plcontent}}</text>
              </view>
            </view>
          </view>

        </view>
      </blockquote>
      <blockquote v-show="scList.length==0">
        <text style="color:  #cccccc;">暂无评论记录</text>
      </blockquote>
    </view>
  </view>
</template>

<script>
  import search from "@/component/search/search.vue";
  import {
    mapState,
    mapMutations
  } from "vuex"
  import {
    cmode
  } from '@/env.js'
  import {
    getplInfo
  } from '@/api/user.js'
  export default {
    components: {
      search
    },
    data() {
      return {
        scList: [],
        basesrc: cmode,
      };
    },
    computed: {},
    methods: {
      goBack() {
        this.$Router.back()
      },
      cgetplInfo() {
        getplInfo().then(res => {
          this.scList = res.data
        })
      }
    },
    onReady() {
      this.cgetplInfo()
    }
  }
</script>

<style lang="scss" scoped>
  .u-demo-block__content {
    width: 700rpx;
    margin: 100rpx auto;
    height: 500rpx;

    .album {
      color: white;
      display: flex;
      align-items: flex-start;

      &__avatar {
        background-color: $u-bg-color;
        padding: 10rpx;
        border-radius: 6rpx;
      }

      &__content {
        margin-left: 40rpx;
        flex: 1;
      }
    }


  }


  .item {
    padding: 0 20rpx;
    margin: 40 0rpx;

    .bot {
      margin: 20rpx 0;
    }

    .iitem {
      display: flex;
      align-items: center;
      justify-content: space-between;


      .left {
        display: flex;
        align-items: center;

        text {
          margin-left: 30rpx;
        }
      }

      .right {
        width: 80rpx;
        height: 40rpx;
        background-color: #c00000;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      }
    }

  }

  .u-page {
    padding: 0;

    &__item {

      &__title {
        color: $u-tips-color;
        background-color: $u-bg-color;
        padding: 30rpx;
        font-size: 30rpx;

        &__slot-title {
          color: $u-primary;
          font-size: 28rpx;
        }
      }
    }
  }

  .u-collapse-content {
    color: $u-tips-color;
    font-size: 28rpx;
  }

  .main {
    width: 100vw;
    height: auto;

    .abottom {
      width: 100vw;
      height: auto;
      background-color: white;
      margin-top: calc(var(--status-bar-height) + 130rpx);
      color: black;
      box-sizing: border-box;
      font-size: 28rpx;

      .aitem {
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .aleft {
          display: flex;

          .aright {
            margin-left: 40rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .nickname {
              font-size: 22rpx;

              text:nth-child(1) {
                font-weight: 600;
                margin-right: 10rpx;
              }

            }

            .content {
              font-size: 26rpx;

              text:nth-child(2) {
                color: #00aeec;
                margin: 0 10rpx;
              }
            }
          }
        }
      }
    }

    .top {
      width: 100vw;
      height: 100rpx;
      position: fixed;
      top: 0;
      z-index: 1;

      .left {
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }

      .right {
        display: flex;

        .dw {
          margin: 0 10rpx;
        }
      }
    }
  }
</style>
